<template>
  <van-tab title="基本">
    <!-- tab选项卡包裹层，用于better scroll初始化 -->
    <div class="tab-inner-wrap"
         ref="wrapper">
      <div class="tab-inner">
        <!-- 分组名称展示 S -->
        <van-skeleton :row="1"
                      v-for="i in skeletonRepeat"
                      :key="i"
                      :loading="skeletonLoading">
          <template v-for="(value, key, index) in data"
                    :key="index">
            <div class="tab-inner-title">
              {{key}}
            </div>
            <!-- 分组名称展示 E -->
            <!-- 基本信息内容 S-->
            <div class="tab-inner-content">
              <list-card v-for="(item, i) in value"
                         :key="i"
                         :title="item['key']"
                         :rightDescription="item['value']"
                         rdColor="#666666">
              </list-card>
            </div>
          </template>
          <!-- 空状态 -->
          <van-empty description=""
                     v-if="Object.keys(data).length === 0">
            <template #image>
              <div class="empty-image">
                <img src="/images/detail/icon_empty.png" />
              </div>
            </template>
          </van-empty>
        </van-skeleton>
        <!-- 基本信息内容 E -->
      </div>
    </div>
  </van-tab>
</template>

<script>
import { reactive, ref, toRefs, nextTick, inject } from 'vue'
import ListCard from "@/components/ListCard.vue"
import usebScroll from '@/hooks/usebScroll'
import { getSkeletonInstance } from '@/hooks/useSkeleton'
import { getBasic } from '@/api/request/business'

const useBasic = () => {
  const basicState = reactive({
    data: {}
  })
  return {
    basicState
  }
}
export default {
  components: {
    ListCard
  },
  setup () {
    const { basicState } = useBasic()
    const wrapper = ref('wrapper')
    const $scroll = usebScroll()
    const beanId = inject('beanId')
    const id = inject('id')
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance({ skeletonRepeat: 16 })
    const refresh = (options) => {
      getBasic({
        beanId,
        id
      }).then(response => {
        narrowSkeleton()
        basicState.data = response.body.data.item
        hideSkeleton()
        nextTick(() => {
          wrapper.value.style.height = `calc(100vh - ${options.offsetTop})`
          $scroll.initOrRefreshBScroll(wrapper.value)
        })
      })
    }
    return {
      ...toRefs(basicState),
      wrapper,
      refresh,
      skeletonLoading,
      skeletonRepeat

    }
  }

}
</script>

<style scoped>
::v-deep(.van-skeleton__row) {
  width: 94% !important;
  height: 22px !important;
  margin: 0.64rem 0.2667rem 0px 0.2667rem;
}
</style>